import { Outlet } from 'react-router-dom'
import { Layout } from 'antd';
import React, { useEffect, useState } from 'react';
import Sidemenu from '../../components/sandbox/Sidemenu';
import Headbar from '../../components/sandbox/Headbar';
import './Sandbox.css'
import axios from 'axios';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css'; 

const { Content } = Layout;

export default function Sandbox(props) {
  NProgress.start();
  const [menu, setMenu] = useState([]);
  useEffect(()=>{
    axios({
      url:'/rights?_embed=children'
    }).then(res =>{
      setMenu(res.data);
    })
  },[])
  useEffect(()=>{
    NProgress.done();
  })
  return (
    <Layout>
      <Sidemenu menu={menu}></Sidemenu>
      <Layout className="site-layout">
        <Headbar></Headbar>
        <Content
          className="site-layout-background"
          style={{
            margin: '24px 16px',
            padding: 24,
            minHeight: 280,
            overflow:'auto'
          }}
        >
          
            <Outlet>
            </Outlet>  {/* 插槽 */}
        </Content>
      </Layout>
    </Layout>
  );
};
